import { computed, defineComponent, ref } from "vue";
import PageTitle from "@/components/PageTitle";
import apiTool from "@/command/apiTool";
import { IFormRef } from "@/components/Form/types";
import ButtonView from "@/components/ButtonView";
import { useRequest } from "./request";
import FormGroup from "@/components/FormGroup";
import { FormGroupPropsData } from "@/components/FormGroup/types";
export default defineComponent({
  name: "brandApplication",
  setup() {
    const userInfo = localStorage.getItem("userInfo") as string;
    const userInfoJSON = JSON.parse(userInfo) as any;
    const form = ref({
      farmerName: userInfoJSON.name,
      phone: userInfoJSON.phone,
    });
    const formRef = ref<IFormRef>();
    const { confirm, productList, packingList } = useRequest();
    return () => {
      const data = computed<FormGroupPropsData[]>(() => [
        {
          data: [
            {
              label: "真实姓名",
              key: "farmerName",
              type: "input",
              readonly: true,
              rules: [
                {
                  required: true,
                },
              ],
            },
            {
              label: "联系电话",
              key: "phone",
              type: "input",
              readonly: true,
              rules: [
                {
                  required: true,
                },
              ],
            },
            {
              label: "农产品",
              type: "select",
              key: "produceType",
              rules: [
                {
                  required: true,
                  message: "请选择农产品",
                },
              ],
              typeData: productList.value,
            },
            {
              label: "包装类型",
              type: "select",
              key: "packType",
              rules: [
                {
                  required: true,
                  message: "请选择包装类型",
                },
              ],
              typeData: packingList.value,
            },
            {
              label: "申请数量",
              key: "applyNum",
              type: "input",
              rules: [
                {
                  required: true,
                },
              ],
            },
          ],
        },
        {
          title: "",
          data: [
            {
              label: "备注",
              key: "remarks",
              type: "textarea",
            },
          ],
        },
      ]);
      return (
        <PageTitle title="品牌申请" bgColor={apiTool.getBackGroundColor()}>
          <div class={"p-[10px]"}>
            <FormGroup
              data={data.value}
              v-model={form.value}
              ref={formRef}
              class="m-child-top-20"
            />
            <ButtonView
              onClick={() => {
                formRef.value?.submit(({ result, error, submitState }) => {
                  submitState && confirm(form.value);
                });
              }}
              block
              type="primary"
              class="!mt-[50px] !h-[40px]"
            >
              确定
            </ButtonView>
          </div>
        </PageTitle>
      );
    };
  },
});
